<template>
  <div class="com-full">
    <Card :name="name" :imgType="1">
      <template #body>
        <div class="frame com-flex-1 com-full com-flex-r com-center">
          <div class="com-flex-1 com-full com-flex-c">
            <div class="tab com-flex-r" :style="styles">
              <div
                v-for="(item, index) in tab"
                :key="index"
                @click="tabClick(index)"
                :class="[
                  'com-flex-1 com-full com-center name',
                  { active_name: change === index },
                ]"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="echart-frame com-flex-r">
              <div class="echart">
                <Echarts :options="options" />
              </div>
              <div class="info com-flex-c com-center-r">
                <div
                  class="com-flex-r com-center-c"
                  v-for="(item, index) in alarmList"
                  :key="index"
                >
                  <div class="point" :style="{ background: item.background }"></div>
                  <span class="name">{{ item.name }}</span>
                  <div class="number">{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="table">
            <Table :column="column" :row="row" />
          </div>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup>
import Card from "@/components/Card/Card.vue";
import { Alarm_option } from "@/utils/options/AlarmChart.option";
import Echarts from "@/components/Echarts/Echarts.vue";
import { computed, onMounted, ref, watch, onUnmounted } from "vue";
import Table from "@/components/Table/Table.vue";
import api from "@/api";
import bus from "@/utils/bus.js";
import { useParamsStore } from "@/stores/params.js";
import { getOpt } from "../../options/MockData";

const paramsStore = useParamsStore();
const param = computed(() => paramsStore.param);
const name = "告警统计";
const alarmList = ref([]);
const valueArray = computed(() => {
  return alarmList.value.map((item) => item.value);
});
const totalValue = computed(() => {
  return alarmList.value.reduce((accumulator, currentValue) => {
    return accumulator + currentValue.value;
  }, 0);
});
const tab = ref([
  {
    id: 1,
    name: "告警来源",
  },
  {
    id: 2,
    name: "告警等级",
  },
]);
const change = ref(0);
const options = ref({});
//tab点击触发
const styles = computed(() => {
  if (change.value === 0) {
    return {
      backgroundImage: `url(imgs/34.png)`,
    };
  } else {
    return {
      backgroundImage: `url(imgs/44.png)`,
    };
  }
});
//tab切换
const tabClick = (index) => {
  change.value = index;
  dataInit();
};
const column = ref([
  { label: "告警类型", props: "alarmType", width: 17 },
  { label: "告警等级", props: "alarmLevel", width: 17 },
  { label: "告警详情", props: "alarmDesc", width: 21 },
  { label: "告警时间", props: "alarmTime", dataType: "Time", width: 25 },
]);
const row = ref([]);
const dataInit = async () => {
  const colors = [
    "linear-gradient(0deg,#299ae7 0%, #ffffff 100%)",
    "linear-gradient(0deg,#fff96c 0%, #ffffff 100%)",
    "linear-gradient(0deg,#0ce8eb 0%, #ffffff 100%)",
    "linear-gradient(0deg,#8ecbe8 0%, #ffffff 100%)",
  ];
  if (isMockData) {
    const mockdata = await getOpt(param.value.ueId);
    if (change.value === 0) {
      alarmList.value = [
        {
          name: "动环告警",
          value: getRandon(mockdata.v10?.min, mockdata.v10?.max),
          background: colors[0],
        },
        {
          name: "故障告警",
          value: getRandon(mockdata.v11?.min, mockdata.v11?.max),
          background: colors[1],
        },
        {
          name: "U位告警",
          value: getRandon(mockdata.v9?.min, mockdata.v9?.max),
          background: colors[2],
        },
      ];
    } else {
      alarmList.value = [
        {
          name: "一级",
          value: getRandon(mockdata.v12?.min, mockdata.v12?.max),
          background: colors[0],
        },
        {
          name: "二级",
          value: getRandon(mockdata.v13?.min, mockdata.v13?.max),
          background: colors[1],
        },
        {
          name: "三级",
          value: getRandon(mockdata.v14?.min, mockdata.v14?.max),
          background: colors[2],
        },
        {
          name: "四级",
          value: getRandon(mockdata.v15?.min, mockdata.v15?.max),
          background: colors[3],
        },
      ];
    }
  } else {
    try {
      const { data } = await api.alarm(param.value);
      if (change.value === 0) {
        alarmList.value = [
          {
            name: "网络告警",
            value: data?.sealHeadAlarm ?? 0,
            background: colors[0],
          },
          {
            name: "动环告警",
            value: data?.faultAlarm ?? 0,
            background: colors[1],
          },
          { name: "资源告警", value: data?.uAlarm ?? 0, background: colors[2] },
        ];
        alarmList.value = [
          {
            name: "一级",
            value: data?.levelOneAlarm ?? 0,
            background: colors[0],
          },
          {
            name: "二级",
            value: data?.levelTwoAlarm ?? 0,
            background: colors[1],
          },
          {
            name: "三级",
            value: data?.levelThreeAlarm ?? 0,
            background: colors[2],
          },
          {
            name: "四级",
            value: data?.levelFourAlarm ?? 0,
            background: colors[3],
          },
        ];
      }
    } catch (error) {
      console.log(error);
    }
  }
  options.value = Alarm_option(valueArray.value, totalValue);
};
const tableInit = async () => {
  const {
    data: { records },
  } = await api.alarmList({ size: 20 });
  row.value = records;
};

//取随机数
const getRandon = (min, max) => {
  if (min === max) {
    return max;
  }
  if (min === 0 && max === 0) {
    return 0;
  }
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
let isMockData = true;
onMounted(() => {
  bus.on("useMock", (e) => {
    isMockData = e;
    dataInit();
  });
  tableInit();
});
onUnmounted(() => {
  bus.off("useMock", (e) => {
    isMockData = e;
    dataInit();
  });
});
watch(
  () => param.value,
  () => {
    dataInit();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.frame {
  margin: 25px 0 0 23px;

  .tab {
    width: 400px;
    height: 50px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: all;

    .name {
      cursor: pointer;
      font-size: 21px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #b5c4d0;
      letter-spacing: 2.4px;
    }

    .active_name {
      font-family: PingFang SC, PingFang SC-Semibold;
      color: #ffffff;
    }
  }

  .echart-frame {
    margin: 20px 0 0 0;
    justify-content: space-between;
    width: 96%;
    height: 60%;
    background: url("/imgs/15.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .echart {
      width: 37%;
      height: 96%;
    }

    .info {
      justify-content: space-evenly;
      width: 46%;
      height: 100%;
      flex-wrap: nowrap;
      .point {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        white-space: nowrap;
      }

      .name {
        margin-left: 13px;
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b5c4d0;
        letter-spacing: 1.5px;
        white-space: nowrap;
      }

      .number {
        margin-left: 80px;
        font-size: 32px;
        font-family: DIN Alternate, DIN Alternate-Bold;
        font-weight: 700;
        text-align: left;
        color: #0080cc;
        letter-spacing: 2.4px;
      }
    }
  }

  .table {
    width: 53%;
    height: 100%;
  }
}
</style>
